<template>
  <div class="counter-warp">
    <p>mapState Counter: {{stateCount}}</p>
    <p>mapGetters Counter: {{realCount}}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="addFivePlus">+5</button>
    </p>

    <a href="/pages/index" class="home">去往首页</a>
  </div>
</template>

<script>
import { COUNTER_INCREMENT, COUNTER_DECREMENT } from '../store/mutation-types';
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      stateCount: state => state.counter.count

    }),
    ...mapGetters('counter', {
      realCount: 'realCount'
    })
  },
  methods: {
    ...mapMutations('counter', [
      COUNTER_DECREMENT
    ]),
    ...mapActions('counter', [
      COUNTER_INCREMENT,
      'addFivePlus'
    ])
  }
};
</script>

<style>
.counter-warp {
  text-align: center;
  margin-top: 100px;
}
.home {
  display: inline-block;
  margin: 100px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
